<template>
  <div @click="tapComic" :class="['comic-box',cname]">
		<div class="image-box">
			<img v-lazy="comic.image" :key="comic.image" alt="">
		</div>
		<p class="comic-title">{{comic.title}}</p>
		<p class="comic-author">{{comic.author}}</p>
	</div>
</template>

<script>
export default {
	props: {
		cname:{
			type: String,
			default: ''
		},
		comic: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	methods: {
		tapComic(e) {
			if(this.comic) {
				this.$emit('onTapComic', this.comic.cid)
			}
		}
	}
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/color.scss';
.comic-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: $font-size-14;
  color: $color-text-9;
	p {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.comic-title {
		font-size: $font-size-14;
		font-weight: 600;
		color: $color-text-5;
	}
}
</style>
